<template>
  <!-- 新增深化设计成果详情 -->
  <base-breadcrumb
    class="flexMemberInfo-container"
    title="查看深化设计成果"
  >
    <a-spin :spinning="loading">
      <a-card>
        <title-name title="查看深化设计成果"></title-name>
        <!-- 表单 -->
        <custom-form
          ref="ruleForm"
          :is-validate="true"
          :edit-model="''"
          :form="form"
          :form-list="formOption"
          :is-emit="false"
        >
          <template slot="designUnitName">
            <div @click="onSearch(1)">
              <a-input
                class="chioseInput"
                style="width:calc(100% - 70px);"
                disabled
                :value="form.designUnitName"
                placeholder="请选择设计单位名称"
              ></a-input>
              <a-button
                class="chioseBtn"
                disabled
                type="primary"
              >选择</a-button>
            </div>
          </template>
          <template slot="designDeepenMaterialName">
            <div>
              <a-input
                class="chioseInput"
                style="width:calc(100% - 70px);"
                disabled
                :value="form.designDeepenMaterialName"
                placeholder="请选择深化设计资料"
              ></a-input>
              <a-button
                class="chioseBtn"
                disabled
                @click="onSearch(2)"
                type="primary"
              >选择</a-button>
            </div>
          </template>
        </custom-form>
        <!-- 表单 -->
      </a-card>

      <div class="tool-btns page-btn-right-top">
        <a-button
          class="ml20"
          @click="handleClose"
        >关闭</a-button>
      </div>
    </a-spin>
  </base-breadcrumb>
  <!-- 新增深化设计成果详情 -->

</template>

<script>
import { deepList, searchArr, modalColumns } from './model.js'
import { detail } from '@/api/design/deepDesign/outcomeManagement'
import cloneDeep from 'lodash.clonedeep'
export default {
  name: 'outcomeManagementForm',
  props: {
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editModel: this.$route.query.editModel, // 操作状态:0 查看;1 编辑;2 新增
      id: this.$route.query.id || '',
      businessId: this.$route.query.businessId, //审核流程的businessId
      // 页面加载
      loading: false,
      detailStatus: false,
      // 表单
      form: {
        branchComId: '',
        branchCompany: '',
        projectId: '',
        createTime: '',
        creatorName: '',
        designCategoryId: '',
        designCategoryName: '',
        designDeepenBook: {},
        designDeepenBookId: '',
        designDeepenBookName: '',
        designUnitId: '',
        designUnitName: '',
        deepen: {},
        person: '',
        resultsInfo: '',
        resultsName: ''
      },
      // 深化项列表
      deepList,
      //深化设计策划书
      designDeepenBook: [],

      branchCom: [], //分公司数据
      project: [], //项目名称数据
      deepenList: []
    }
  },
  computed: {
    // 表单配置
    formOption() {
      return [
        {
          label: '分公司',
          keyName: 'branchComId',
          type: 'a-select',
          data: this.branchCom,
          disabled: true
        },
        {
          label: '项目名称',
          keyName: 'projectId',
          type: 'a-select',
          data: this.project,
          disabled: true
        },
        {
          label: '项目设计管理类别',
          keyName: 'designCategoryName',
          type: 'BaseInput',
          disabled: true
        },
        {
          label: '深化设计成果名称',
          keyName: 'resultsName',
          type: 'BaseInput',
          rules: [{ required: true, message: '请输入深化设计成果名称', trigger: 'change' }],
          disabled: true
        },
        {
          label: '深化设计策划书',
          keyName: 'designDeepenBook',
          type: typeof this.form.designDeepenBook === 'string' ? 'BaseInput' : 'a-select',
          // data: this.designDeepenBook,
          attrs: {
            labelInValue: true
          },
          disabled: true
        },
        {
          label: '深化项',
          keyName: 'deepenItem',
          type: 'a-select',
          data: this.deepenList,
          disabled: true
        },
        {
          label: '设计单位名称',
          keyName: 'designUnitName',
          type: 'BaseInput',
          slot: true,
          disabled: true
        },
        {
          label: '创建人',
          keyName: 'creatorName',
          type: 'BaseInput',
          disabled: true
        },
        {
          label: '创建时间',
          keyName: 'createTime',
          type: 'BaseInput',
          disabled: true
        },
        {
          label: '深化设计资料',
          keyName: 'designDeepenMaterialName',
          type: 'BaseInput',
          slot: true
        },
        {
          label: '深化设计成果信息',
          keyName: 'resultsInfo',
          type: 'BaseTextarea',
          autoSize: { minRows: 10, maxRows: 10 },
          attrs: {
            maxLength: 3000
          },
          ellipsis: true,
          span: 24,
          rules: [{ required: true, message: '请输入深化设计成果信息', trigger: 'change' }],
          disabled: true
        }
      ]
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    /**
     * @description: 获取深化设计成果详情
     */
    async getDetail() {
      this.loading = true
      this.detailStatus = true
      const { data, code, message } = await detail({ id: this.id })
      this.loading = false
      if (code === 200) {
        let formData = this.$clone(this.form)
        // Object.keys(this.form).forEach((el) => {
        //   this.form[el] = data[el] || formData[el]
        // })
        this.form = {
          ...formData,
          ...data
        }
        this.form.id = data.id //该条数据id

        this.branchCom = [
          {
            value: data.branchComId,
            label: data.branchComName
          }
        ]
        this.project = [
          {
            value: data.projectId,
            label: data.projectName
          }
        ]
        // 如果返回深化设计策划书id为空判断为输入框
        if (data.designDeepenBookId && data.designDeepenBookName) {
          this.form.designDeepenBook = {
            value: data.designDeepenBookId,
            label: data.designDeepenBookName
          }
        } else {
          this.form.designDeepenBook = data.designDeepenBookName
        }
        //深化项
        this.deepenList = [
          {
            value: data.deepenItem,
            label: data.deepenItemName
          }
        ]
      } else {
        this.$message.warning(message)
      }
      this.loading = false
    },

    /**
     * @description: 关闭
     */
    handleClose() {
      if (this.isAudit) {
        window.close()
      } else {
        this.$multiTab.close(this.$route.fullpath)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
@{deep} .ant-form {
  .chioseInput {
    height: 28px;
    border-radius: 4px;
  }
  .chioseBtn {
    height: 28px;
    margin-left: 5px;
  }
}
</style>
